<template>
    <yd-tab>
        <!-- <yd-tab-panel label="登录">
            <yd-flexbox direction="vertical" class="inputstyle">
                <yd-cell-group class="demo-small-pitch">
                    <yd-flexbox-item>
                        <yd-cell-item>
                            <hd-svg-icon name="hd-dianhua" slot="left" class="iconstyle"/>
                            <yd-input slot="right" type="tel" required regex="mobile" ref="login#loginname" hdLabel="手机号" v-model="loginname" style="width:236px;" placeholder="请输入手机号"></yd-input>
                        </yd-cell-item>
                    </yd-flexbox-item>
                </yd-cell-group>
                <yd-flexbox-item>
                    <yd-cell-group class="demo-small-pitch">
                        <yd-flexbox>
                            <yd-flexbox-item>
                                <yd-cell-item>
                                    <yd-input slot="right" v-model="mobilecode" max="6" required type="text" placeholder="请输入手机验证码" :showErrorIcon="true" :showSuccessIcon="false" :showRequiredIcon="false"></yd-input>
                                </yd-cell-item>
                            </yd-flexbox-item>
                            <yd-flexbox-item>
                                <yd-button type="primary" @click.native="clickSendMessageForMobile" class="getcode">获取短信验证码</yd-button>
                            </yd-flexbox-item>
                        </yd-flexbox>
                    </yd-cell-group>
                </yd-flexbox-item> -->
                <!-- <yd-cell-group class="demo-small-pitch">
                    <yd-flexbox-item>
                        <yd-cell-item>
                            <hd-svg-icon name="hd-mm" slot="left" class="iconstyle"/>
                            <yd-input slot="right" type="password" style="width:236px;" hdLabel="密码" required ref="login#password" v-model="password" placeholder="请输入密码" :showSuccessIcon="false"></yd-input>
                        </yd-cell-item>
                    </yd-flexbox-item>
                </yd-cell-group> -->
                <!-- <yd-flexbox-item>
                    <yd-button-group>
                        <yd-button size="large" type="primary" class="loginstyle" @click.native="clickLogin" >登录</yd-button>
                    </yd-button-group>
                </yd-flexbox-item>
                <yd-flexbox-item v-show="false">
                    <yd-flexbox class="thirdParty">
                        <yd-flexbox-item class="div2"></yd-flexbox-item>
                        <yd-flexbox-item>
                            <span>第三方登录</span>
                        </yd-flexbox-item>
                        <yd-flexbox-item class="div2"></yd-flexbox-item>
                    </yd-flexbox>
                    <yd-flexbox class="thirdicon">
                        <yd-flexbox-item>
                        <yd-icon name="weixin" color="#44b549"></yd-icon>
                        </yd-flexbox-item>
                    </yd-flexbox>
                </yd-flexbox-item>
            </yd-flexbox>
        </yd-tab-panel> -->
        <yd-tab-panel label="绑定手机号">
            <yd-flexbox direction="vertical" class="inputstyle">
                <yd-flexbox-item>
                    <yd-cell-group class="demo-small-pitch">
                        <yd-flexbox>
                            <yd-flexbox-item>
                                <yd-cell-item>
                                    <hd-svg-icon name="hd-dianhua" slot="left" class="iconstyle"/>
                                    <yd-input slot="right" type="tel" v-model="regmobile" ref="regmobile" required regex="mobile" placeholder="请输入手机号码" :showRequiredIcon="false"></yd-input>
                                </yd-cell-item>
                            </yd-flexbox-item>
                        </yd-flexbox>
                        <!-- <p slot="bottom" style="color:#F00;padding: 0 .3rem;" v-html="result"></p> -->
                    </yd-cell-group>
                </yd-flexbox-item>
                <yd-flexbox-item>
                    <yd-cell-group class="demo-small-pitch">
                        <yd-flexbox>
                            <yd-flexbox-item>
                                <yd-cell-item>
                                    <yd-input slot="right" max="6" v-model="code" type="text" placeholder="验证码" required :showErrorIcon="true" :showSuccessIcon="false" :showRequiredIcon="false"></yd-input>
                                </yd-cell-item>
                            </yd-flexbox-item>
                            <yd-flexbox-item>
                                <img @click="clickValidateCode" :src="codeimg" class="codeimg"> 
                            </yd-flexbox-item>
                        </yd-flexbox>
                    </yd-cell-group>
                </yd-flexbox-item>     
                <yd-flexbox-item>
                    <yd-cell-group class="demo-small-pitch">
                        <yd-flexbox>
                            <yd-flexbox-item>
                                <yd-cell-item>
                                    <yd-input slot="right" v-model="mobilecode" max="6" required type="text" placeholder="请输入手机验证码" :showErrorIcon="true" :showSuccessIcon="false" :showRequiredIcon="false"></yd-input>
                                </yd-cell-item>
                            </yd-flexbox-item>
                            <yd-flexbox-item>
                                <yd-button type="primary" @click.native="clickSendMessageForMobile" class="getcode">获取短信验证码</yd-button>
                            </yd-flexbox-item>                        
                        </yd-flexbox>
                    </yd-cell-group>
                </yd-flexbox-item>
                <yd-flexbox-item>
                    <yd-button-group>
                        <yd-button size="large" type="primary" style="height:40px;" @click.native="clickRegist">绑定</yd-button>
                    </yd-button-group>  
                </yd-flexbox-item>
                <yd-popup v-model="show1" position="center" width="90%">
                    <yd-cell-item>
                        <yd-input slot="right" v-model="mobile_password" required type="text" placeholder="请设置密码" :showErrorIcon="true" :showSuccessIcon="false" :showRequiredIcon="false"></yd-input>
                    </yd-cell-item>
                    <p style="text-align: center;margin-top:10px;margin-bottom:10px">
                        <yd-button @click.native="setPassword">确定</yd-button>
                    </p>
                </yd-popup>
            </yd-flexbox>
        </yd-tab-panel>
    </yd-tab>
</template>

<script>
import sha1 from 'sha1'
export default {
  name: 'appLogin',
  data () {
    return {
      loginname: '',
      password: '',
      codeimg: '',
      regmobile: '',
      setpassword: '',
      code: '',
      result: '',
      mobilecode: '',
      guid2: '',
      show1: false,
      mobile_password: ''
    }
  },
  mounted: function () {
    this.clickValidateCode()
  },
  methods: {
    clickValidateCode () {
      this.codeimg = this.API.verify + '?st=' + Math.random();
    },
    clickSendMessageForMobile () {
      if (!this.regmobile) {
        this.$dialog.toast({mes: '请输入手机号!'})
        return false
      }
    //   const input = this.$refs.input9;
    //   this.result = `{<br />  valid：${input.valid}，<br />  errorMes：'${input.errorMsg}'，<br />  errorCode：'${input.errorCode}'<br />}`;
      if (!this.code) {
        this.$dialog.toast({mes: '请输入验证码!'})
        return false;
      }
      this.hdAjax({
        url: this.API.sendMsg,
        data: {
          mobile: this.regmobile,
          code: this.code
        },
        success: (resultData) => {
          if (resultData.data && resultData.errcode == 0) {
            this.$dialog.toast({mes: '验证码已发送'})
          } else {
            this.$dialog.toast({mes: resultData.msg})
          }
        }
      })
    },
    clickRegist () {
    //   this.show1 = true;
      if (!this.regmobile) {
        this.$dialog.toast({mes: '请输入手机号!'})
        return false
      }
      if (!this.mobilecode) {
        this.$dialog.toast({mes: '请输入短信验证码!'})
        return false
      }
      this.hdAjax({
        url: this.API.checkCode,
        data: {
          mobile: this.regmobile,
          code: this.mobilecode
        },
        success: (resultData) => {
          if (resultData.status == '1') {
            this.$dialog.toast('绑定成功');
            // this.$router.go(-1);
            console.log('!@#!@#@!#');
            this.show1 = true;
            console.log(this.show1);
            console.log('上面是this.show1');
          } else {
            this.$dialog.toast({mes: resultData.msg})
            if (resultData.msg == '相同手机号无需重新绑定') {
            //   this.$router.go(-1);
            }
          }
        }
      })
    },
    setPassword () {
      let setpwd = sha1(this.mobile_password);
      console.log(this.mobile_password);
      console.log('加密前');
      console.log(setpwd);
      console.log('加密后');
      // if (this.mobilecode == null) {
      //   this.$dialog.toast('请设置密码！');
      //   return;
      // }
      this.hdAjax({
        url: this.API.setPassword,
        data: {
          password: setpwd
        },
        success: (resultData) => {
          if (resultData.errcode == 0) {
            this.$dialog.toast('设置成功！');
            this.$router.go(-1);
            this.show1 = false;
          } else {
            this.$dialog.toast({mes: resultData.msg})
            this.$router.go(-1);
          }
        }
      })
    }
  }
}
</script>


<style>
    .inputstyle{
      width: 300px;
      margin:0 auto;
      padding:20px;
     }
     .thirdParty{
       width: 100%;
       text-align: center;
       padding-top:1rem;
     }
     .thirdicon{
       line-height: 1.25rem;
       text-align: center;
     }
    .div2{ 
        border-top:#d0d0d0 1px solid;
        transform-origin: 0 0;
        transform:scaleY(.5);
    }
    .passwordbutton{
        border:none;
        color: #8E8E8E;
        float: right;
        padding-top: .2rem;
    }
    .bgstyle{
      background-color:#ffffff;
    }
    .loginstyle{
        width:236px;
        height:40px;

    }
    .codeimg{
        width:100px;
        height:40px;
        float: right;
    }
    .getcode{
      height: .9rem;
      width: 90%;
      padding: 0;
      float: right;
    }
    .iconstyle{
      font-size: .5rem !important;
      margin-right: .1rem;
      fill: #6b6b6b !important;
    }
    .cell-icon{
      margin-right: 0;
    }
    .cell-right{
      padding-right:0;
    }
    .cell-item{
      padding-left:0;
    }
</style>
